<template>
    <div class="page">
        <header class="header">
            <div class="header-left">
                <i class="header-icon"></i>
                <span>{{title}}</span>
            </div>
        </header>

        <div class="add-box">
            <div class="box-content" v-show="$route.query.type !='newestDetails'">
                <el-form :model="form" :rules="rules" ref="tip" class="box-content">
                    <el-form-item prop="title">
                        <span class="title-text">标题</span>
                        <el-input class="add-text" type="text" v-model.trim="form.title"  @focus="onChange(1)" placeholder="请输入标题,最多32个字" maxlength="32"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="box-content" v-show="$route.query.type ==='newestDetails'">
                <el-form :model="form" :rules="rules" ref="tip" class="box-content">
                    <el-form-item label="" prop="title">
                        <span class="title-text">标题</span>
                        <el-input class="add-text" readonly unselectable="on" type="text" v-model="form.title"></el-input>
                    </el-form-item>
                </el-form>
            </div>

            <div class="add-box-main">
                <div class="img-box pr">
                    <span class="img-title pa">标签图</span>
                    <div class="img-cell pa">
                        <img :src="form.url" class="avatar " alt=" " v-show="$route.query.type =='newestDetails'">
                        <el-upload class="avatar-uploader " v-show="$route.query.type !='newestDetails'" :limit="10" action="/system/v1/common/fileUpload" name="filecontent" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                            <span class="avatar-bg pa">点击添加图片</span>
                            <img :src="form.url" class="avatar " alt=" ">
                        </el-upload>
                        <span class="img-box-red pa" v-show="$route.query.type !='newestDetails'">(建议尺寸*：512px*512px)</span>
                    </div>
                </div>

                <div class="quill">
                    <span class="quill-text">{{label}}</span>
                    <el-form class="">
                        <el-form-item>
                            <!-- <vue-neditor-wrap v-model="form.context" :config="myConfig" :destroy="false" @ready="ready" style="width: 950px; height: 300px;"></vue-neditor-wrap> -->
                       
						<div style="border: 1px solid #ccc;">
						       <Toolbar
						           style="border-bottom: 1px solid #ccc"
						           :editor="editor"
						           :defaultConfig="toolbarConfig"
						           :mode="mode"
						       />
						       <Editor
						           style="height: 300px; overflow-y: hidden;"
						           v-model="form.context"
								   ref="editor"
						           :defaultConfig="editorConfig"
						           :mode="mode"
						           @onCreated="onCreated"
								  @onChange="onChanges"
						       />
						   </div>
						</el-form-item>
                    </el-form>	
                </div>
				
				
				<!-- <editor-bar v-model="detail" :isClear="isClear" @change="change"></editor-bar> -->

            </div>

            <div class="btn-box" v-show="$route.query.type !='newestDetails'">
                <button class="btn-left" @click="cancel()">取消</button>
                <button class="btn-right" @click="outPut()">提交</button>

            </div>
        </div>
    </div>

</template>

<style src="@wangeditor/editor/dist/css/style.css"></style>
<script src="./add.js">
</script>

<style scoped src="./add.css">
</style>

